<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import Post from '@/components/post/index.vue'
import { usePostStore } from '@/stores/modules/post'
import { useUserStore } from '@/stores'
const postStore = usePostStore()
const userStore = useUserStore()
// 定义当前选中的菜单项目
const activeMenu = ref('sports')
const posts = ref(postStore.getSportPosts)
// 处理菜单选择事件
const handleSelect = (key: string) => {
  activeMenu.value = key
  if (key === 'sports') {
    posts.value = postStore.getSportPosts
  } else if (key === 'life') {
    posts.value = postStore.getLifePosts
  } else if (key === 'study') {
    posts.value = postStore.getEducationPosts
  }
}
onMounted(() => {
  setTimeout(() => {
    handleSelect('sports')
    nextTick()
  }, 2000)
})
</script>

<template>
  <div class="board flex">
    <div class="left">
      <!-- 使用 el-menu 创建菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="sports">体育</el-menu-item>
        <el-menu-item index="life">生活</el-menu-item>
        <el-menu-item index="study">学习</el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <!-- 根据选中的菜单项目渲染不同的 Post 组件 -->
      <Post
        v-for="(post, index) in posts"
        :key="index"
        :postData="{
          cover: post.post.pictureBase64,
          username: post.userName,
          title: post.post.title,
          desc: post.post.content.substring(0, 10),
          publishTime: post.post.publishTime,
          commentCount: post.post.commentCount,
          id: post.post.id,
          userId: post.post.userId,
        }"
        :permission="{
          read: post.post.readPermission,
          comment: post.post.commentPermission,
        }"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left {
  position: fixed; /* 固定定位 */
  top: 40%; /* 距离顶部 0 像素 */
  /* 距离左侧 0 像素 */
  z-index: 1000; /* 设置 z-index，确保菜单显示在其他内容上方 */
}

.right {
  margin-left: 100px; /* 为内容区域留出菜单的宽度 */
  flex: 1;
}
</style>
